<% content_for :footer_css, flush: true do %>
  .footer__container--dark .footer__social-media-link > svg {
    fill: #FFFFFF;
  }
  .footer__container--dark .footer__social-media-link:hover > svg {
    fill: #D9D9D9;
  }
  .footer__container--light .footer__social-media-link > svg {
    fill: rgb(<%= s['social_media_icon_color']['value'].join(",") %>);
  }
  .footer__container--light .footer__social-media-link:hover > svg {
    fill: rgb(<%= s['social_media_icon_color_hover']['value'].join(",") %>);
  }
  .footer__container--light .footer__social-media-link > svg .icon-with-stroke {
    stroke: rgb(<%= s['social_media_icon_color']['value'].join(",") %>);
  }
  .footer__container--light .footer__social-media-link:hover > svg .icon-with-stroke {
    stroke: rgb(<%= s['social_media_icon_color_hover']['value'].join(",") %>);
  }
  .footer__container--marketplace_color {
    background-color: rgb(<%= s['social_media_icon_color']['value'].join(",") %>);
  }
  .footer__container--marketplace_color .footer__social-media-link > svg {
    fill: #FFFFFF;
  }
  .footer__container--marketplace_color .footer__social-media-link:hover > svg {
    fill: #D9D9D9;
  }
  .footer__container--marketplace_color .footer__social-media-link > svg .icon-with-stroke {
    stroke: #FFFFFF;
  }
  .footer__container--marketplace_color .footer__social-media-link:hover > svg .icon-with-stroke {
    stroke: #D9D9D9;
  }
  .footer__container--logo .footer__social-media-link > svg {
    fill: rgb(60,60,60);
  }
  .footer__container--logo .footer__social-media-link:hover > svg {
    fill: rgb(60,60,60, 0.5);
  }
  .footer__container--logo .footer__social-media-link > svg .icon-with-stroke {
    stroke: rgb(217,217,217);
  }
  .footer__container--logo .footer__social-media-link:hover > svg .icon-with-stroke {
    stroke: rgb(217,217,217, 0.5);
  }
<% end %>

<%
  has_links = s["links"].present?
  has_social = s["social"].present?
  s["social"] = s["social"].select{|x| x['enabled'] == true || x['enabled'] == nil} if has_social
  container_modifier = has_links && has_social ? "" : "--center"
%>

<footer id="<%= section_id %>" class="footer__container--<%= s['theme'] %>">
  <div class="footer__content">

    <div class="footer__links-container<%= container_modifier %>">

      <% if s['theme'] == Community::FOOTER_LOGO %>
        <div class="footer__logo-container">
          <div class="footer__logo-image">
            <% if s['logo'] %>
              <img src="<%= s['logo']['value'] %>" />
            <% end %>
            <div class="footer__copyrights--markdown">
              <%= render_markdown(s['copyright']) %>
            </div>
          </div>
          <% if has_links %>
            <% s['links'].each_slice(5) do |links| %>
              <ul class="footer__link-list">
                <% links.each do |link| %>
                  <li class="footer__link-list-item"><a class="footer__link" href="<%= link['href']['value'] %>"><%= link["label"] %></a></li>
                <% end %>
              </ul>
            <% end %>
          <% end %>
        </div>
      <% end %>

      <% if has_links %>
        <ul class="footer__link-list">
          <% s['links'].each do |link| %>
            <li class="footer__link-list-item"><a class="footer__link" href="<%= link['href']['value'] %>"><%= link["label"] %></a></li>
          <% end %>
        </ul>
      <% end %>

      <% if has_social %>
        <div class="footer__social-media">
          <% if s['theme'] == Community::FOOTER_LOGO %>
            <% s["social"].each_slice(3) do |socials| %>
              <% socials.each do |social| %>
                <%= render partial: 'social_icon', locals: {social: social} %>
              <% end %>
              <br/>
            <% end %>
          <% else %>
            <% s["social"].each do |social| %>
              <%= render partial: 'social_icon', locals: {social: social} %>
            <% end %>
          <% end %>
        </div>
      <% end %>
    </div>

    <hr class="footer__separator" />

    <div class="footer__copyrights--markdown">
      <%= render_markdown(s['copyright']) %>
    </div>
  </div>
</footer>
